<template>
  <t-drawer :visible="visible" header="筛选" @close="close" :on-confirm="onClickConfirm" :close-btn="true" size="384px">
    <div class="content-box">
      <div class="content-box-item">
        <span class="content-box-item-name">类型</span>
        <t-select v-model="parmas.typeId">
          <t-option v-for="item in props.tabType.select3" :key="item.id" :label="item.text" :value="item.id" />
        </t-select>
      </div>

      <div class="content-box-item">
        <span class="content-box-item-name">年代</span>
        <t-cascader
          v-model="parmas.AgeId"
          :options="props.tabType.select4"
          :keys="{
            value: 'id',
            children: 'children',
            label: 'text',
          }"
          clearable
          check-strictly
        />
      </div>
      <div class="content-box-item" v-if="props.lookType == 1">
        <span class="content-box-item-name">所属单位</span>
        <t-select v-model="parmas.companyId">
          <t-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
        </t-select>
      </div>
      <div class="content-box-item">
        <span class="content-box-item-name">级别</span>
        <div class="radio-boxs">
          <t-radio-group v-model="parmas.LevelId" @change="onChange">
            <t-radio allow-uncheck :value="item.id" v-for="item in props.tabType.select1" :key="item.id">{{
              item.text
            }}</t-radio>
          </t-radio-group>
        </div>
      </div>
      <div class="content-box-item">
        <span class="content-box-item-name">是否包含语音讲解</span>
        <div class="radio-boxs">
          <t-radio-group v-model="parmas.IsAudio" @change="onChange">
            <t-radio allow-uncheck :value="item.id" v-for="item in audioGroup" :key="item.id">{{ item.name }}</t-radio>
          </t-radio-group>
        </div>
      </div>
      <div class="content-box-item">
        <span class="content-box-item-name">是否包含3D</span>
        <div class="radio-boxs">
          <t-radio-group v-model="parmas.IsExternal" @change="onChange">
            <t-radio allow-uncheck :value="item.id" v-for="item in audioGroup" :key="item.id">{{ item.name }}</t-radio>
          </t-radio-group>
        </div>
      </div>
    </div>

    <!-- <t-row>
      <t-col :span="12">材质类型： </t-col>
      <t-col :span="12">
        <t-select v-model="typeId">
          <t-option v-for="item in props.tabType.select3" :key="item.id" :label="item.text" :value="item.id" />
        </t-select>
      </t-col>
      <t-col :span="12">所属年代： </t-col>
      <t-col :span="12">
        <t-cascader
          v-model="ageId"
          :options="props.tabType.select4"
          :keys="{
            value: 'id',
            children: 'children',
            label: 'text',
          }"
          clearable
          check-strictly
        />
      </t-col>
      <t-col :span="12">展品级别： </t-col>
      <t-col :span="12">
        <div class="select-box">
          <div
            class="hw-click-cursor"
            :class="{ 'select-box-item': true, 'select-box-item-active': levelId == item.id }"
            v-for="item in props.tabType.select1"
            :key="item.id"
            @click="levelId = item.id"
          >
            {{ item.text }}
          </div>
        </div>
      </t-col>
    </t-row> -->
    <template #footer>
      <div class="footer-box">
        <t-button variant="outline" @click="onReset"> 清空 </t-button>

        <t-button @click="onSubmit">筛选</t-button>
      </div>
    </template>
  </t-drawer>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, reactive } from 'vue';
import { templateCompanys } from '@/api/project/project';

const props = defineProps({
  tabType: {
    type: Object,
  },
  visible: {
    type: Boolean,
  },
  lookType: {
    type: Number,
    default: 0,
  },
});
const audioGroup = [
  { name: '包含', id: 1 },
  { name: '不包含', id: 0 },
];
const parmas = reactive({
  typeId: null,
  AgeId: null,
  LevelId: null,
  companyId: null,
  IsAudio: null, //是否包含音频
  IsExternal: null, //是否包含3D
});
const companyList = ref([]);
const emit = defineEmits(['close', 'Confirm']);

const onReset = () => {
  console.log('清空');
  parmas.typeId = null;
  parmas.AgeId = null;
  parmas.LevelId = null;
  parmas.companyId = null;
  parmas.IsAudio = null;
  parmas.IsExternal = null;
  emit('Confirm', parmas);
};
const close = () => {
  emit('close');
};
const initCompanys = async () => {
  let res = await templateCompanys('', 9999);
  companyList.value = res.data;
  // console.log(companyList.value, 'break');
};
initCompanys();
const onChange = () => {};
const onSubmit = () => {
  emit('Confirm', parmas);
  //   parmas.typeId = typeId.value;
  //   parmas.ageId = ageId.value;
  //   parmas.levelId = levelId.value;
  //   visible.value = false;
};
const onClickConfirm = () => {};
</script>

<style lang="less" scoped>
@import '../../../../Exhibits/index.less';
:deep(.t-drawer__header) {
  height: 54px;
  box-shadow: none;
  border-bottom: none;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 22px;
}
:deep(.t-select__wrap) {
  margin-bottom: 8px;
}
:deep(.t-drawer__body) {
  padding: 0 24px;
}
.content-box {
  height: 100%;
  width: 100%;
}
.content-box-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 16px;
}
.content-box-item-name {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 22px;
  margin-bottom: 8px;
}
.footer-box {
  padding: 0 8px;
  :deep(.t-button--variant-outline) {
    width: 68px;
    height: 36px;
  }
  :deep(.t-button--theme-primary) {
    width: 256px;
    height: 36px;
  }
}
</style>
